import React, { Component } from 'react'
import { Select } from 'antd'
import { connect } from 'react-redux'
import ImageLogo from '../ImageLogo'
import btc from '../../assets/logo-btc.svg'
import eth from '../../assets/logo-eth.png'
import './index.less'

const { Option } = Select

class CurrencySelect extends Component {

  render() {
    const {
      items = [
        {
          title: 'Bitcoin',
          logo_image_url: btc,
          symbol: 'BTC',
        },
        {
          title: 'Ethereum',
          logo_image_url: eth,
          symbol: 'ETH',
        },
      ],
    } = this.props
    const value = (this.props.value && `${this.props.value}`) || undefined
    return (
      <Select
        {...this.props}
        className='currency-select'
        value={value}
        disabled={this.props.disabled || items.length === 0}
        placeholder='Select Currency'
      >
        {
          items.map(item => (
            <Option key={`input-${item.symbol}`} value={`${item.symbol}`}>
              <div className='currency-select-option'>
                <ImageLogo
                  height={15}
                  borderColor='#303030'
                  src={item.logo_image_url}
                  alt={item.title}
                  iconType='pay-circle'
                />
                {item.title}<span style={{ marginLeft: '6px', color: '#8e8e8e' }}>{item.symbol}</span>
              </div>
            </Option>
          ))
        }
      </Select>
    )
  }
}

const mapStateToProps = state => ({
  accessToken: state.app.accessToken,
})

export default connect(mapStateToProps)(CurrencySelect)
